<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/tcommon.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/jquery/gantt/css/style.css" />
<link rel="stylesheet" href="static/jquery/gantt/css/prettify.css" />
<script src="static/jquery/gantt/js/jquery.fn.gantt.js"></script>
<title>工程进度</title>
<style type="text/css">
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	padding: 0 0 50px 0;
}

.contain {
	width: 1000px;
	margin: 0 auto;
}

h1 {
	margin: 40px 0 20px 0;
}

h2 {
	font-size: 1.5em;
	padding-bottom: 3px;
	border-bottom: 1px solid #DDD;
	margin-top: 50px;
	margin-bottom: 25px;
}

table th:first-child {
	width: 150px;
}
/* Bootstrap 3.x re-reset */
.fn-gantt *, .fn-gantt *:after, .fn-gantt *:before {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.modal-backdrop {
	z-index: 0;
}

.panel {
	text-align: center;
}
</style>
</head>
<body class="easyui-layout main_index_container">
	<div data-options="region: 'center' " class="center_container">
		<div style="margin-top: 5px;">
			项目：
			<input style="min-width: 400px; text-align: center;" id="projectitem" name="projectitem" class="easyui-combobox" editable="false"
				data-options="
						    valueField: 'id',
						    textField: 'name',
						    url: 'projectitemuserlist.do',
						    onSelect: function(rec){
						    	currentprojectitem = rec;
						   		loadData();
						    },onLoadSuccess:function(data){
						    	if(data.length>0){
						    	$('#projectitem').combobox('setValue',data[0].id);
						    	currentprojectitem = data[0];
						    	loadData();
						    	}
						    },
						    panelHeight: 'auto'">
		</div>
		<div class="gantt"></div>
	</div>
</body>
<script>
	var currentprojectitem;
	function loadData() {
		if (currentprojectitem != null){
			$.ajax({
				type : 'GET',
				url : "getschedule.do?projectitemid=" + currentprojectitem.id,
				contentType : "application/json",
				success : function(data) {
					$(".gantt").gantt({
						source : data,
						//source:[{ name: "主计划1",desc: "计划日期",values: [{id: "t01",from: "/Date(2018/09/15)/",to: "/Date(2018/09/15)/",label: "计划",customClass: "ganttRed"}]},{ame: "主计划1",desc: "计划日期",values: [{id: "t01",from: "/Date(2018/09/15)/",to: "/Date(2018/09/15)/",label: "计划",customClass: "ganttRed"}]}],
						navigate : "scroll",
						itemsPerPage : 10,
						onItemClick : function(data) {
							var obj = $.parseJSON(data);
							if (obj.projectitemid){//计划
								var html = "";
								html += '<tr><td width=30%>计划内容</td>';
								html += '<td width=70%>' + obj.content + '</td></tr>';
								html += '<tr><td width=30%>百分比</td>';
								html += '<td width=70%>' + obj.percent + '%</td></tr>';
								html += '<tr><td width=30%>完成百分比</td>';
								html += '<td width=70%>' + obj.finishpercent + '%</td></tr>';
								$("#info").empty().append(html);
								$("#proDlg").modal('show');
							}
							if (obj.mainid){
								html += '<tr><td width=30%>日计划内容</td>';
								html += '<td width=70%>' + obj.content + '</td></tr>';
								html += '<tr><td width=30%>主计划百分比</td>';
								html += '<td width=70%>' + obj.percent + '%</td></tr>';
								if (obj.report){
									html += '<tr><td width=30%>工作汇报</td>';
									html += '<td width=70%>' + obj.report.content + '</td></tr>';
									html += '<tr><td width=30%>主计划完成百分比</td>';
									html += '<td width=70%>' + obj.report.percent * obj.percent / 100 + '%</td></tr>';
								}
								$("#info").empty().append(html);
								$("#proDlg").modal('show');
							}
						},
						onAddClick : function(dt,rowId) {
						},
						onRender : function() {
						},
						onDataLoadFailed : function(data) {
						}
					});
				}
			});
		}
	}
</script>
</html>